import Image from 'next/image'
import Link from 'next/link'

export default function PostItem ({ post }) {
  const { image, slug } = post
  const imageSrc = `/images/posts/${slug}/${image}`
  return (
    <li
      style={{
        backgroundColor: '#237034',
        padding: '1rem',
        margin: '1rem',
        borderRadius: '1rem'
      }}
    >
      <Link href={`/posts/${post.slug}`}>
        <div>
          <Image src={imageSrc} width={300} height={200}></Image>
        </div>
        <div>
          <h1>{post.title}</h1>
          <time>{post.date}</time>
        </div>
      </Link>
    </li>
  )
}
